<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script>
      function pushToState(target) {
        window.history.pushState({}, "title", target);
      }
    </script>
  </head>

  <body>
    <script type="text/javascript" src="/libs/systemjs/system.js"></script>
    <script type="text/javascript" src="/libs/systemjs/amd.js"></script>
    <script
      type="text/javascript"
      src="/libs/systemjs/named-exports.js"
    ></script>
    <script type="text/javascript" src="/libs/systemjs/use-default.js"></script>

    <script type="systemjs-importmap">
      {
        "imports": {
          "@portal": "http://127.0.0.1:8000/portal.js",
          "@portal/reactApp" : "http://127.0.0.1:9001/entry.js",
          "@portal/vueApp" : "http://127.0.0.1:9002/entry.js",
          "@portal/a1App" : "http://127.0.0.1:9003/entry.js"
        }
      }
    </script>

    <!-- Static navbar -->
    <link rel="stylesheet" href="./style.css" />

    <div class="navbar">
      <ul>
        <a href="javascript:void(0)" onclick="pushToState('reactApp')">
          <li>
            App 1 (React)
          </li>
        </a>
        <a href="javascript:void(0)" onclick="pushToState('vueApp')">
          <li>
            App 2 (Vue)
          </li>
        </a>
        <a href="javascript:void(0)" onclick="pushToState('a1App')">
          <li>
            App 3 (Angular 1)
          </li>
        </a>

        <a href="javascript:void(0)" onclick="pushToState('a7App')">
          <li>
            App 4 (Angular 6)
          </li>
        </a>
      </ul>
    </div>
    <script src="http://127.0.0.1:9010/base.js"></script>
    <script>
      // load the application
      System.import("@portal");
    </script>
  </body>
</html>
